<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>西瓜二手车电子商务</title>
<link type="text/css" href="css/buy.css" rel="stylesheet" />
<link type="text/css" href="css/common.css" rel="stylesheet" />
<link type="text/css" href="css/reset.css" rel="stylesheet" />
<link type="text/css" href="theme-chalk/index.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script><!--必须得放在第一的位置-->
    <script type="text/javascript" src="js/buy.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/esc.js"></script>
    <script src="js/element-ui-index.js"></script>
</head>

<body>
<div id="app">
<div class="index">
    <myframe>

  <div class="buy_content width_1200_center">
    <div class="content_position">您当前的位置：<a href="javascript:">首页</a><span>&gt;</span><a href="javascript:">买车</a><span>&gt;</span><a href="javascript:">广西二手车</a></div>
    <div class="buy_content_cate background5 clearfix">
      <ul class="select" @click="djtype">
		<li class="select-list">
			<dl id="select1">
				<dt>地区：</dt>
				<dd class="select-all selected"><a href="javascript:void(0)">不限</a></dd>
				<dd><a href="javascript:void(0)">南宁</a></dd>
				<dd><a href="javascript:void(0)">柳州</a></dd>
				<dd><a href="javascript:void(0)">桂林</a></dd>
				<dd><a href="javascript:void(0)">梧州</a></dd>
				<dd><a href="javascript:void(0)">北海</a></dd>
				<dd><a href="javascript:void(0)">防城港</a></dd>
				<dd><a href="javascript:void(0)">钦州</a></dd>
				<dd><a href="javascript:void(0)">贵港</a></dd>
				<dd><a href="javascript:void(0)">玉林</a></dd>
				<dd><a href="javascript:void(0)">百色</a></dd>
				<dd><a href="javascript:void(0)">贺州</a></dd>
				<dd><a href="javascript:void(0)">河池</a></dd>
				<dd><a href="javascript:void(0)">来宾</a></dd>
				<dd><a href="javascript:void(0)">崇左</a></dd>
			</dl>
		</li>
		<li class="select-list">
			<dl id="select2">
              <dt>品牌：</dt>
              <dd class="select-all selected"><a href="javascript:void(0)">不限</a></dd>
              <dd><a href="javascript:void(0)">奥迪</a></dd>
              <dd><a href="javascript:void(0)">奔驰</a></dd>
              <dd><a href="javascript:void(0)">宝马</a></dd>
              <dd><a href="javascript:void(0)">标致</a></dd>
              <dd><a href="javascript:void(0)">比亚迪</a></dd>
              <dd><a href="javascript:void(0)">本田</a></dd>
              <dd><a href="javascript:void(0)">保时捷</a></dd>
              <dd><a href="javascript:void(0)">宾利</a></dd>
              <dd><a href="javascript:void(0)">别克</a></dd>
              <dd><a href="javascript:void(0)">宝骏</a></dd>
              <dd><a href="javascript:void(0)">长城</a></dd>
              <dd><a href="javascript:void(0)">大众</a></dd>
              <dd><a href="javascript:void(0)">东风</a></dd>
              <dd><a href="javascript:void(0)">丰田</a></dd>
              <dd><a href="javascript:void(0)">福特</a></dd>
              <dd><a href="javascript:void(0)">法拉利</a></dd>
              <dd><a href="javascript:void(0)">广汽中兴</a></dd>
              <dd><a href="javascript:void(0)">黑豹</a></dd>
              <dd><a href="javascript:void(0)">捷豹</a></dd>
              <dd><a href="javascript:void(0)">凯迪拉克</a></dd>
              <dd><a href="javascript:void(0)">卡威</a></dd>
              <dd><a href="javascript:void(0)">铃木</a></dd>
              <dd><a href="javascript:void(0)">劳斯莱斯</a></dd>
              <dd><a href="javascript:void(0)">兰博基尼</a></dd>
              <dd><a href="javascript:void(0)">雷克萨斯</a></dd>
              <dd><a href="javascript:void(0)">路虎</a></dd>
              <dd><a href="javascript:void(0)">马自达</a></dd>
              <dd><a href="javascript:void(0)">迈巴赫</a></dd>
              <dd><a href="javascript:void(0)">讴歌</a></dd>
              <dd><a href="javascript:void(0)">奇瑞</a></dd>
              <dd><a href="javascript:void(0)">日产</a></dd>
              <dd><a href="javascript:void(0)">荣威</a></dd>
              <dd><a href="javascript:void(0)">三菱</a></dd>
              <dd><a href="javascript:void(0)">天马</a></dd>
              <dd><a href="javascript:void(0)">五菱</a></dd>
              <dd><a href="javascript:void(0)">雪铁龙</a></dd>
              <dd><a href="javascript:void(0)">现代</a></dd>
              <dd><a href="javascript:void(0)">雪佛兰</a></dd>
              <dd><a href="javascript:void(0)">云豹</a></dd>
              <dd><a href="javascript:void(0)">中华</a></dd>
              <dd><a href="javascript:void(0)">众泰</a></dd>
			</dl>
		</li>
        <li class="select-list">
			<dl id="select3">
				<dt>车系：</dt>
				<dd class="select-all selected"><a href="javascript:void(0)">不限</a></dd>
				<dd><a href="javascript:void(0)">A6L</a></dd>
				<dd><a href="javascript:void(0)">A4L</a></dd>
				<dd><a href="javascript:void(0)">Q5</a></dd>
				<dd><a href="javascript:void(0)">Q7</a></dd>	
				<dd><a href="javascript:void(0)">Q3</a></dd>
				<dd><a href="javascript:void(0)">A5</a></dd>
				<dd><a href="javascript:void(0)">A4</a></dd>
				<dd><a href="javascript:void(0)">A3</a></dd>
				<dd><a href="javascript:void(0)">A8L</a></dd>
				<dd><a href="javascript:void(0)">TT</a></dd>
				<dd><a href="javascript:void(0)">A1</a></dd>
				<dd><a href="javascript:void(0)">A7</a></dd>
				<dd><a href="javascript:void(0)">S5</a></dd>
				<dd><a href="javascript:void(0)">A6</a></dd>
				<dd><a href="javascript:void(0)">S3</a></dd>             
                
			</dl>
		</li>
        <li class="select-list">
			<dl id="select4">
				<dt>车型：</dt>
				<dd class="select-all selected"><a href="javascript:void(0)">不限</a></dd>
				<dd><a href="javascript:void(0)">两厢轿车</a></dd>
				<dd><a href="javascript:void(0)">三厢轿车</a></dd>
				<dd><a href="javascript:void(0)">跑车</a></dd>
				<dd><a href="javascript:void(0)">suv</a></dd>
				<dd><a href="javascript:void(0)">mpv</a></dd>
			</dl>
		</li>
		<li class="select-list">
			<dl id="select5">
				<dt>价格：</dt>
				<dd class="select-all selected"><a href="javascript:void(0)">不限</a></dd>
				<dd><a href="javascript:void(0)">3万内</a></dd>
				<dd><a href="javascript:void(0)">3-5万</a></dd>
				<dd><a href="javascript:void(0)">5-8万</a></dd>
				<dd><a href="javascript:void(0)">8-10万</a></dd>
				<dd><a href="javascript:void(0)">10-15万</a></dd>
				<dd><a href="javascript:void(0)">15-20万</a></dd>
				<dd><a href="javascript:void(0)">20-30万</a></dd>
				<dd><a href="javascript:void(0)">30-50万</a></dd>
				<dd><a href="javascript:void(0)">50万以上</a></dd>
			</dl>
		</li>
        <li class="select-list">
			<dl id="select6">
				<dt>车龄：</dt>
				<dd class="select-all selected"><a href="javascript:void(0)">不限</a></dd>
				<dd><a href="javascript:void(0)">1年内</a></dd>
				<dd><a href="javascript:void(0)">2年内</a></dd>
				<dd><a href="javascript:void(0)">3年内</a></dd>
				<dd><a href="javascript:void(0)">3-5年</a></dd>
				<dd><a href="javascript:void(0)">5-8年</a></dd>
				<dd><a href="javascript:void(0)">8年以上</a></dd>
			</dl>
		</li>
        <li class="select-list">
			<dl id="select7">
				<dt>里程：</dt>
				<dd class="select-all selected"><a href="javascript:void(0)">不限</a></dd>
				<dd><a href="javascript:void(0)">1万公里内</a></dd>
				<dd><a href="javascript:void(0)">3万公里内</a></dd>
				<dd><a href="javascript:void(0)">5万公里内</a></dd>
				<dd><a href="javascript:void(0)">5万公里以上</a></dd>
			</dl>
		</li>
        <!--加一个空的  因为select-result绝对定位 就没有行了-->
        <!--<li class="select-list">
			<dl class="select13">
				<dd>&nbsp;</dd>
			</dl>
		</li>-->
		<li class="select-result">
			<dl>
				<dt>已选：</dt>
				<dd class="select-no" style="">暂时没有选择条件</dd>
                <dd class="select-noo"><a href="javascript:void(0)" title="全部删除"></a></dd>
			</dl>
		</li>
        <li class="select-list select-list8">
			<dl id="select8" class="select8">
				<dt>其他：</dt>
				<dd><span class="select8_pai"><span>排量</span><i></i></span></dd>
				<dd><span class="select8_bian"><span>变速箱</span><i></i></span></dd>
				<dd><span class="select8_color"><span>颜色</span><i></i></span></dd>
				<dd><span class="select8_country"><span>国别</span><i></i></span></dd>
                <div class="select8_pai1 width_h_280_82 position_ab background5 display_n"><p class="p1"><a href="javascript:void(0)">1.0升以下</a><a href="javascript:void(0)">1.1-1.5升</a><a href="javascript:void(0)">1.6-2.0升</a><a href="javascript:void(0)">2.1-3.0升</a><a href="javascript:void(0)">3.1升以上</a></p></div><div class="select8_bian1 width_h_280_82 position_ab background5 display_n"><p class="p1"><a href="javascript:void(0)">手动</a><a href="javascript:void(0)">自动</a></div><div class="select8_color1 width_h_280_82 position_ab background5 display_n"><p class="p1"><a href="javascript:void(0)">黑色</a><a href="javascript:void(0)">白色</a><a href="javascript:void(0)">红色</a><a href="javascript:void(0)">蓝色</a><a href="javascript:void(0)">香槟色</a><a href="javascript:void(0)">绿色</a><a href="javascript:void(0)">黄色</a><a href="javascript:void(0)">橙色</a><a href="javascript:void(0)">紫色</a><a href="javascript:void(0)">银灰色</a><a href="javascript:void(0)">深灰色</a><a href="javascript:void(0)">咖啡色</a><a href="javascript:void(0)">多彩色</a><a href="javascript:void(0)">其他</a></p></div><div class="select8_country1 width_h_280_82 position_ab background5 display_n"><p class="p1"><a href="javascript:void(0)">中国</a><a href="javascript:void(0)">德国</a><a href="javascript:void(0)">法国</a><a href="javascript:void(0)">意大利</a><a href="javascript:void(0)">捷克</a><a href="javascript:void(0)">美国</a><a href="javascript:void(0)">西拔牙</a><a href="javascript:void(0)">澳大利亚</a><a href="javascript:void(0)">韩国</a><a href="javascript:void(0)">英国</a><a href="javascript:void(0)">瑞典</a><a href="javascript:void(0)">日本</a></p></div>
			</dl>
		</li>
      </ul>

    </div>
    <div class="hr_10"></div>
    <div class="buy_content_li width_1200_center">
      <div class="buy_content_li_top clearfix">
        <div class="buy_content_li_top_default fl"><a href="#">默认排序</a></div>
        <div class="buy_content_li_top_price fl"><a href="#">价格</a></div>
        <div class="buy_content_li_top_mile fl"><a href="#">里程</a></div>
        <div class="buy_content_li_top_age fl"><a href="#">车龄</a></div>
        <div class="buy_content_li_top_num fr"><a href="#"></a></div>
      </div>
      <div class="hr_5"></div>
      <div class="buy_content_li_list over_hidden clearfix">

          <div v-for="c in page.list">
           <div class="buy_content_con_margin_l"><!--只用来向右移动的，这样才不会有一个因为父级宽度不够出现在下方-->    
             <div class="buy_content_con_c'+i+' buy_content_con_c width_h_292_276 over_hidden fl"><!--只用来设置内边距--><!--用来设置外右边距-->    
               <div class="buy_content_con_cc width_h_292_276">    
                 <div class="buy_content_con_pic width_h_292_186">
                     <a :href="'buy_details.html?carId='+c.carId"><img :src="c.image" width="292" height="186" /></a>
                 </div>    
                 <div class="buy_content_con_txt width_h_292_90">    
                   <p class="p1">    
                     <a title="" href="#">{{c.carName}}</a>
                   </p>    
                   <p class="p2">    
                     <span class="">{{c.date}}上牌</span><em class="shuxian">|</em>行驶{{c.traveled}}万公里
                   </p>    
                   <p class="p3">    
                     <span><i class="fc-org priType">{{c.oldPrice}}万</i></span><s>{{c.newPrice}}万</s>
                   </p>    
                 </div>    
               </div>    
             </div>    
           </div>    
          </div>
      </div>
    </div>
      <div style="padding-left: 85%">
      <el-pagination
              layout="prev, pager, next"
              :total="(page.count * 10)"
              @current-change="fy">
      </el-pagination>
      </div>
  </div>
 
 
 
 
 
 
  <div class="hr_8"></div>

    </myframe>
</div>
</div>

<script>
    var v = new Vue({
        el : "#app",
        data : {
            page : {
                pageNum : 1,
                list : []
            },
        },
        created(){
            this.query();
        },
        methods:{
            query(){
                var p = new URLSearchParams();
                p.append("pageNum",this.page.pageNum)
                axios.post("/esc-order/esc/carMessage/queryPage",p).then(res=>{
                    this.page.list = res.data.records;
                    var reg = /upload/
                    for(var a of  this.page.list ){
                        if (a.image.match(reg)){
                            a.image = "/esc-user" + a.image;
                        }
                    }
                    this.page.count = res.data.total;
                })
            },
            fy(newpage){
                this.page.pageNum = newpage;
                this.query();
            },
            djtype(e){
                console.log(e.target.innerText)
                var p = new URLSearchParams();
                p.append("type",e.target.innerText)
                axios.post("/esc-order/esc/carMessage/queryType",p).then(res=>{
                    this.page.list = res.data;

                })
            }
        }
    })
</script>
</body>
</html>